<template>
  <div class="file-info-panel">
    <el-scrollbar height="100%">
      <div class="info-content">
        <!-- File Basic Info -->
        <div class="info-section">
          <h4 class="section-title">基本信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">文件名:</span>
              <span class="info-value">{{ fileInfo.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">路径:</span>
              <span class="info-value" :title="fileInfo.path">{{ fileInfo.path }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">类型:</span>
              <el-tag :type="fileInfo.type === 'file' ? 'primary' : 'warning'" size="small">
                {{ fileInfo.type === 'file' ? '文件' : '文件夹' }}
              </el-tag>
            </div>
            <div class="info-item" v-if="fileInfo.size">
              <span class="info-label">大小:</span>
              <span class="info-value">{{ formatFileSize(fileInfo.size) }}</span>
            </div>
            <div class="info-item" v-if="fileInfo.timestamp">
              <span class="info-label">修改时间:</span>
              <span class="info-value">{{ formatDate(fileInfo.timestamp) }}</span>
            </div>
          </div>
        </div>

        <!-- Version Info -->
        <div class="info-section">
          <h4 class="section-title">版本信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">版本ID:</span>
              <el-tag type="info" size="small">{{ formatVersionId(versionId) }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">文件ID:</span>
              <span class="info-value">{{ fileInfo.id }}</span>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="info-section">
          <h4 class="section-title">操作</h4>
          <div class="action-buttons">
            <el-button 
              type="primary" 
              :icon="View" 
              @click="$emit('previewFile')"
              size="small"
            >
              预览内容
            </el-button>
            <el-button 
              type="success" 
              :icon="Clock" 
              @click="$emit('showHistory')"
              size="small"
            >
              查看历史
            </el-button>
            <el-button 
              type="warning" 
              :icon="Download" 
              @click="$emit('recoverFile')"
              size="small"
            >
              恢复文件
            </el-button>
            <el-button 
              :icon="CopyDocument" 
              @click="copyPath"
              size="small"
            >
              复制路径
            </el-button>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { 
  View, 
  Clock, 
  Download, 
  CopyDocument 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FileTreeNode } from '../types/basic'

interface Props {
  fileInfo: FileTreeNode
  versionId: string | null
}

interface Emits {
  (e: 'previewFile'): void
  (e: 'showHistory'): void
  (e: 'recoverFile'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Methods
function formatFileSize(size: number): string {
  const units = ['B', 'KB', 'MB', 'GB']
  let unitIndex = 0
  let fileSize = size
  
  while (fileSize >= 1024 && unitIndex < units.length - 1) {
    fileSize /= 1024
    unitIndex++
  }
  
  return `${fileSize.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
}

function formatDate(timestamp: number): string {
  return new Date(timestamp).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

function formatVersionId(versionId: string | null): string {
  if (!versionId) return '-'
  return versionId.startsWith('-') ? versionId.substring(1, 9) : versionId.substring(0, 8)
}

async function copyPath() {
  try {
    await navigator.clipboard.writeText(props.fileInfo.path)
    ElMessage.success('路径已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}
</script>

<style scoped>
.file-info-panel {
  height: 100%;
  padding: 16px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-section {
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  padding: 16px;
  background-color: var(--el-bg-color);
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding-bottom: 8px;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  font-weight: 500;
  color: var(--el-text-color-regular);
  min-width: 80px;
  flex-shrink: 0;
}

.info-value {
  color: var(--el-text-color-primary);
  word-break: break-all;
  flex: 1;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-buttons .el-button {
  justify-content: flex-start;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-label {
    min-width: auto;
  }
}
</style>